<template>
    <div>
        <el-card class="box-card" shadow="never">
            <i class="el-icon-search"></i>
            <span>筛选搜索</span>
            <el-row :gutter="10" style="margin-top:15px;">
               <el-col :span='6'>
                  <el-input v-model="shop_code">
                    <template slot="prepend">门店编码</template>
                  </el-input>
               </el-col>
               <el-col :span="6">
                 <el-date-picker
                       style="width:100%"
                       v-model="start_date"
                       type="date"
                       value-format="yyyy-MM-dd"
                       placeholder="理赔起始日期">
                     </el-date-picker>
                </el-col>
                <el-col :span="6">
                  <el-date-picker
                        style="width:100%"
                        v-model="end_date"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="理赔截止日期">
                      </el-date-picker>
                 </el-col>
            </el-row>
            <el-row :gutter="10" style="margin-top:15px;">
                <el-col :span='6'>
                   <el-input v-model="car_no">
                     <template slot="prepend">车牌号</template>
                   </el-input>
                </el-col>
                <el-col :span='6'>
                   <el-input v-model="lt_bar_code">
                     <template slot="prepend">轮胎条码号</template>
                   </el-input>
                </el-col>
            </el-row>

            <el-row :gutter="20" class="yx_el_row">
                <el-col>
                    <el-button type="success" plain @click="search">筛选</el-button>
                    <el-button type="primary" plain :loading="excel_loading" @click="exportExcel">{{excel_button_name}}</el-button>
                </el-col>
            </el-row>
            <div class="yx_line"></div>
            <div style="margin-top:10px;">
              <i class="el-icon-tickets"></i>
              <span>数据列表</span>
            </div>
            <el-table class="yx_table" border :data="caselist">
                <el-table-column type="index" label="序号" width="50">
                </el-table-column>
                <el-table-column prop="car_no" label="车牌号" width="100">
                </el-table-column>
                <el-table-column prop="customer_name" label="车主姓名" width="100">
                </el-table-column>
                <el-table-column prop="customer_tel_no" label="车主手机号" width="110">
                </el-table-column>
                <el-table-column prop="shop_name" label="门店名称" width="150">
                </el-table-column>
                <el-table-column prop="shop_code" label="门店编码" width="100">
                </el-table-column>
                <el-table-column prop="shop_owner_name" label="店主姓名" width="100">
                </el-table-column>
                <el-table-column prop="shop_tel_no" label="店主手机号" width="110">
                </el-table-column>
                <el-table-column prop="shop_address" label="门店地址" width="110"> <!-- 门店地址由省-市-区-详细地址组成 -->
                </el-table-column>
                <el-table-column prop="lt_bar_code" label="轮胎条码号" width="100">
                </el-table-column>
                <el-table-column prop="service_rate" label="评价" width="100">
                    <template slot-scope="scope">
                       <span v-for="(item,index) in scope.row.service_rate">★</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="80">
                    <template slot-scope="scope">
                        <el-link type="primary" @click="auditDetail(scope.row.id)">审核详情</el-link>
                    </template>
                </el-table-column>
                <el-table-column prop="status_name" label="当前状态" width="100">
                </el-table-column>
                <el-table-column prop="first_update_time" label="初审提交时间" width="120">
                </el-table-column>
                <el-table-column prop="end_update_time" label="终审通过时间">
                </el-table-column>
            </el-table>
            <Pagination :total_count="total_count" :getList="getList"></Pagination>
            <!-- 审核详情 -->
            <el-drawer
              title="审核详情"
              :visible.sync="drawer"
              :direction="direction"
              :destroy-on-close=true
              size="40%"
              :wrapperClosable=false
              class="audit-drawer"
              :before-close="handleClose">
             <el-timeline>
                 <el-timeline-item :timestamp="current_audit_detail.first_update_time" placement="top" type="primary">
                   <el-card class="time-line-card">
                     <el-row v-viewer>
                        <el-col>
                           <h4>车牌号：{{current_audit_detail.car_no}}</h4>
                           <h4>门店名称：{{current_audit_detail.shop_name}}</h4>
                        </el-col>
                        <el-col :span="12">
                          <h4>1.全车照片</h4>
                          <img :src="current_audit_detail.first_img_one"/>
                        </el-col>
                        <el-col :span="12">
                           <h4>2.轮胎侧面照片</h4>
                           <img :src="current_audit_detail.first_img_two"/>
                        </el-col>
                        <el-col :span="12">
                          <h4>3.年周+行驶证</h4>
                          <img :src="current_audit_detail.first_img_three"/>
                        </el-col>
                        <el-col :span="12">
                          <h4>4.胎损部位</h4>
                          <img :src="current_audit_detail.first_img_four"/>
                        </el-col>
                     </el-row>
                   </el-card>
                 </el-timeline-item>
                 <el-timeline-item v-if="current_audit_detail.show_v" :timestamp="current_audit_detail.v_time" placement="top" type="primary">
                 </el-timeline-item>
                 <el-timeline-item v-if="current_audit_detail.show_second" :timestamp="current_audit_detail.second_update_time" placement="top" type="primary">
                   <el-card class="time-line-card">
                      <el-row v-viewer>
                         <h4>1.条形码图片</h4>
                         <img :src="current_audit_detail.second_img"/>
                      </el-row>
                   </el-card>
                 </el-timeline-item>
                 <el-timeline-item v-if="current_audit_detail.show_end" :timestamp="current_audit_detail.end_update_time" placement="top" type="primary">
                   <el-card class="time-line-card">
                      <el-row v-viewer>
                        <el-col :span="12">
                          <h4>1.轮胎销毁照片</h4>
                          <img :src="current_audit_detail.end_img_one"/>
                        </el-col>
                        <el-col :span="12">
                          <h4>2.车店合影</h4>
                          <img :src="current_audit_detail.end_img_two"/>
                        </el-col>
                      </el-row>
                   </el-card>
                 </el-timeline-item>
               </el-timeline>
            </el-drawer>
        </el-card>
    </div>
</template>

<script>
    import { getHistoryCaseDetail,getHistoryCaseList } from '@/api/case.js';
    import Pagination from '@/components/Pagination.vue';
    export default {
        name: 'HistoryList',
        components:{ Pagination },
        inject:['reload'],
        data() {
            return {
                caselist:[],
                total_count:0,
                shop_code:'',
                start_date:'',
                end_date:'',
                car_no:'',
                lt_bar_code:'',
                //弹出抽屉
                drawer: false,
                direction: 'rtl',
                current_audit_detail:{},
                //导出excel和photo
                photo_button_name:'导出照片压缩包',
                excel_button_name:'导出Excel',
                photo_loading:false,
                excel_loading:false,
                current_case_id:'',
            }
        },
        methods: {
            getList(current_page,page_size){
                this.$store.dispatch('loadCurrentPageSize',page_size);
                var send_data={
                    current_page:current_page,
                    page_size:page_size,
                    shop_code:this.shop_code,
                    start_date:this.start_date,
                    end_date:this.end_date,
                    car_no:this.car_no,
                    lt_bar_code:this.lt_bar_code
                }
                let that=this;
                getHistoryCaseList(send_data).then(function(response){
                    if(response.data.code==1){
                        that.caselist=response.data.list;
                        that.total_count=response.data.total_count;
                    }
                })
            },
            search(){
               this.getList(1,this.$store.getters.getCurrentPageSize);
            },
            auditDetail(id){
              let data={
                id:id
              };
              let that=this;
              getHistoryCaseDetail(data).then(function(response){
                   if(response.data.code==1){
                      that.current_audit_detail=response.data.info;
                      that.current_audit_detail.first_update_time=response.data.info.first_update_time+'--初审提交';
                      that.current_audit_detail.second_update_time=response.data.info.second_update_time+'--复审提交';
                      that.current_audit_detail.end_update_time=response.data.info.end_update_time+'--终审提交';
                      that.current_audit_detail.v_time=response.data.info.v_time+'--校验通过';
                      that.drawer=true;
                   }
              })
            },
            //抽屉
            handleClose(e){
              this.drawer=false;
            },
            exportExcel(){
                this.excel_loading=true;
                this.excel_button_name='正在导出';
                var send_data={
                    shop_code:this.shop_code,
                    start_date:this.start_date,
                    end_date:this.end_date,
                    car_no:this.car_no,
                    lt_bar_code:this.lt_bar_code,
                    is_excel_export:1
                }
                let that=this;
                getHistoryCaseList(send_data).then(function(response){
                   if(response.data.code==1){
                       let val=response.data.list;
                       if(val.length>0){
                           const { export_json_to_excel } = require('@/api/excel/export2excel.js');
                           const tHeader = ["条形码","四位产品code","年周","产品","单价","投保手机号","投保人姓名","车牌号","车架号","门店编号","代理商","门店名称","门店级别","联系人","手机","省(销售区域)","市(销售区域)","区/县","详细地址","理赔订单日期"];
                           const fields = ["lt_bar_code","lt_product_code","year_week","sku_info","price","customer_tel_no","customer_name","car_no","vin_no","shop_code","agent_name","shop_name","shop_property","shop_owner_name","shop_tel_no","shop_province","shop_city","shop_area","shop_address","first_update_time"];
                           const list=val;
                           const data=that.formatJson(fields,list);
                           let date=new Date();
                           let now_date=date.getFullYear().toString()+(date.getMonth()+1).toString()+date.getDate().toString();
                           export_json_to_excel(tHeader,data,"历史理赔记录-"+now_date);
                       }else{
                           that.$message({
                               message:'没有可导出数据',
                               type:'warning'
                           });
                       }
                       that.excel_loading=false;
                       that.excel_button_name='导出Excel';
                   }
                })
            },
            exportPhoto(){
                this.photo_loading=true;
                this.photo_button_name='正在导出';
                var send_data={
                    shop_code:this.shop_code,
                    start_date:this.start_date,
                    end_date:this.end_date,
                    car_no:this.car_no,
                    lt_bar_code:this.lt_bar_code,
                    is_photo_export:1
                }
                let that=this;
                getHistoryCaseList(send_data).then(function(response){
                    if(response.data.code==1){
                        let val=response.data.list;
                        if(val.length>0){
                           const { handleBatchDownload } = require('@/api/zip/photo2zip.js');
                           let photo_list=[];
                           let photo_name_list=[];
                           let item_to_name={
                              first_img_one:'--初审一.jpg',
                              first_img_two:'--初审二.jpg',
                              first_img_three:'--初审三.jpg',
                              first_img_four:'--初审四.jpg',
                              second_img:'--复审.jpg',
                              end_img_one:'--终审一.jpg',
                              end_img_two:'--终审二.jpg'
                           };
                           for(let i in val){
                              for(let j in val[i]){
                                 if(item_to_name[j]!=undefined){
                                    photo_list.push(val[i][j]);
                                    photo_name_list.push(val[i]['car_no']+'--'+val[i]['lt_bar_code']+item_to_name[j]);
                                 }
                              }
                           }
                           let date=new Date();
                           let now_date=date.getFullYear().toString()+(date.getMonth()+1).toString()+date.getDate().toString();
                           handleBatchDownload(photo_list,photo_name_list,'历史理赔记录照片压缩包-'+now_date+'.zip');
                        }else{
                           that.$message({
                               message:'没有可导出内容',
                               type:'warning'
                           });
                        }
                        that.photo_loading=false;
                        that.photo_button_name='导出照片压缩包';
                    }
                })
            },
            formatJson(filterVal, jsonData) {
                 return jsonData.map(v => filterVal.map(j => v[j]));
            }
        },
        created() {
            this.getList(1,this.$store.state.default_page_size);
        },
    }
</script>
<style>
@import url("../../assets/css/case.css");
</style>
